<template>
    <!-- 月流水-->
    <view
        class="item-info"
        :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''"
    >
        <view class="cate-content">
            <view class="item-fixed-top">
                <view class="title"
                    >{{ title
                    }}{{ type == 3 ? "营收" : type == 4 ? "消耗" : "" }}</view
                >
                <view class="close" @click="close">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view>
            <view class="list-box comm-list">
                <view class="info-box">
                    <view class="s-r-box">
                        <view class="s-r-b">
                            <view>{{ tSaleTxt }}</view>
                            <view class="a-txt">{{ count.amount }}</view>
                        </view>
                        <view class="s-r-b s-r-ml" v-if="type == 5">
                            <view>利润额</view>
                            <view class="a-txt">{{ count.amount }}</view>
                        </view>
                        <view class="s-r-b s-r-b-pl" v-if="type == 1">
                            <view>{{ seReturnTxt }}</view>
                            <view class="a-txt a-txt-red">{{
                                count.amount_th
                            }}</view>
                        </view>
                    </view>
                    <view class="i-f-box">
                        <view class="txt-box" v-if="type == 1 || type == 3">
                            <view>{{
                                type == 3 ? "毛利" : grossProfitTxt
                            }}</view>
                            <view>{{ count.profit }}</view>
                        </view>
                        <view class="txt-box">
                            <view>{{
                                type == 3
                                    ? "销量"
                                    : type == 4
                                    ? "次数"
                                    : salesVolumeTxt
                            }}</view>
                            <view>{{ count.number }}</view>
                        </view>
                        <view class="txt-box">
                            <view>{{
                                type == 3 || type == 4 ? "单数" : oddNumberTxt
                            }}</view>
                            <view>{{ count.num_od }}</view>
                        </view>
                        <view class="txt-box" v-if="type == 4">
                            <view>成本</view>
                            <view>{{ count.cost }}</view>
                        </view>
                        <view class="txt-box" v-if="type == 5">
                            <view>买进量</view>
                            <view>{{ count.cost }}</view>
                        </view>
                    </view>
                </view>
                <view class="l-tit">
                    <view class="t-txt">{{ listTitArr[0] }}</view>
                    <view class="t-txt">{{
                        type == 3
                            ? "销售额"
                            : type == 4
                            ? "消耗额"
                            : listTitArr[1]
                    }}</view>
                    <view class="t-txt" v-if="type == 1 || type == 3">{{
                        listTitArr[2]
                    }}</view>
                    <view class="t-txt" v-if="type == 4">成本</view>
                    <view class="t-txt">{{ listTitArr[3] }}</view>
                    <view class="t-txt">{{
                        type == 4 ? "次数" : listTitArr[4]
                    }}</view>
                    <view class="t-txt" v-if="type == 5">{{
                        listTitArr[5]
                    }}</view>
                </view>
                <view id="list" class="l-box">
                    <view
                        class="list"
                        v-for="(item, index) in list"
                        :key="index"
                        @click="clickItem(item)"
                    >
                        <view class="l-n-d-a">{{ item.time }}</view>
                        <view class="l-n-d-a">{{ item.amount }}</view>
                        <view class="l-n-d-a" v-if="type == 1 || type == 3">{{
                            item.profit
                        }}</view
                        ><view class="l-n-d-a" v-if="type == 4">{{
                            item.cost
                        }}</view>
                        <view class="l-n-d-a">{{ item.num_od }}</view>
                        <view class="l-n-d-a" v-if="type == 5">{{
                            item.num_od
                        }}</view>
                        <view class="l-n-d-a"
                            >{{ item.number
                            }}<text class="icon-font arrow-xiala-font"
                                >&#xe600;</text
                            ></view
                        >
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import util from "../../js/util/Util.js";
import lang from "../../js/conf/Lang.js";
export default {
    data() {
        return {
            type: 1,
            title: "",
            tSaleTxt: "",
            tSaleTxtname: "",
            seReturnTxt: "",
            openShow: 0,
            grossProfitTxt: "",
            salesVolumeTxt: "",
            oddNumberTxt: "",
            listTitArr: [],
            count: {},
            list: [],
            group: 1,
        };
    },

    methods: {
        show(type, data) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.openShow = 2;
            setTimeout(() => {
                this.openShow = state;
            }, timer);
            if (!type) return;

            if (data.type) this.type = data.type;
            if (this.type == 1) {
                this.title = data.title + lang.businessIncomeTxt;
                this.tSaleTxt = lang.saleReport.mSaleTxt;
                this.seReturnTxt = lang.saleReport.mReturnTxt;

                this.grossProfitTxt = lang.saleReport.grossProfitTxt;
                this.salesVolumeTxt = lang.saleReport.salesVolumeTxt;
                this.oddNumberTxt = lang.saleReport.oddNumberTxt;
                this.listTitArr = [
                    lang.dateTxt,
                    lang.saleMoneyTxt,
                    lang.saleReport.grossProfitTxt,
                    lang.saleReport.oddNumberTxt,
                    lang.saleReport.numberTxt,
                ];
            } else if (this.type == 3) {
                this.title = data.title;
                this.tSaleTxt = "本月销售额";
                this.salesVolumeTxt = lang.report.mPurchNumTxt;
                this.oddNumberTxt = lang.report.mPurchOrdTxt;

                this.listTitArr = [
                    lang.dateTxt,
                    lang.jeTxt,
                    lang.saleReport.grossProfitTxt,
                    lang.saleReport.oddNumberTxt,
                    lang.saleReport.numberTxt,
                ];
            } else if (this.type == 4) {
                this.title = data.title;
                this.tSaleTxt = "本月消耗额";
                this.salesVolumeTxt = lang.report.mPurchNumTxt;
                this.oddNumberTxt = lang.report.mPurchOrdTxt;

                this.listTitArr = [
                    lang.dateTxt,
                    lang.jeTxt,
                    lang.saleReport.grossProfitTxt,
                    lang.saleReport.oddNumberTxt,
                    lang.saleReport.numberTxt,
                ];
            } else if (this.type == 5) {
                this.title = data.title;
                this.tSaleTxt = "销售额";
                this.salesVolumeTxt = "进货额";
                this.oddNumberTxt = "销售量";

                this.listTitArr = [
                    lang.dateTxt,
                    "卖量",
                    "买量",
                    "卖出",
                    "买进",
                    "利润",
                ];
            } else {
                this.title = data.title;
                this.tSaleTxt = lang.report.mPurchTxt;
                this.salesVolumeTxt = lang.report.mPurchNumTxt;
                this.oddNumberTxt = lang.report.mPurchOrdTxt;

                this.listTitArr = [
                    lang.dateTxt,
                    lang.jeTxt,
                    lang.saleReport.grossProfitTxt,
                    lang.saleReport.oddNumberTxt,
                    lang.saleReport.numberTxt,
                ];
            }

            this.group = data.group;
            this.list = data.list;
            this.count = data.count;
        },

        clickItem(item) {
            this.$emit("saleBunsinessIncome", item, this.group);
        },

        close() {
            this.show();
        },
    },
};
</script>
<style lang="scss">
.mask {
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    top: var(--window-top);
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 2000;
    transition: 0.3s;
    .mask-content {
        width: 100%;
        max-height: 250px;
        background: #f3f3f3;
        transform: translateY(100%);
        transition: 0.3s;
        .item {
            border-bottom: 1px solid #ececec;
            padding: 10px 20px;
        }
        .active {
            color: #3388ff;
        }
    }
    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.4);
        .mask-content {
            transform: translateY(0);
        }
    }
}
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 500px;
        height: 600px;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        position: relative;
        .item-fixed-top {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #ececec;
            .title {
                font-size: 18px;
                font-weight: bold;
            }
            .close {
                position: absolute;
                right: 5px;
                top: 12px;
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }

    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .cate-content {
            transform: translateY(0);
        }
    }
}
.bg-color {
    background: #e6e6e6;
    padding: 10px;
}
.list-box {
    // height: 100%;//calc(100vh + 51px);
    font-size: 14px;
    color: #333;
    padding-bottom: 40px;

    width: 100%;
    height: 100%;
    .info-box {
        padding: 10px;
        .s-r-box {
            display: flex;
            .s-r-b {
                // text-align: center;
                .a-txt {
                    font-size: 20px;
                    font-weight: bold;
                    color: #3388ff;
                }
                .a-txt-red {
                    color: red;
                }
                &.s-r-ml {
                    margin-left: 20px;
                }
            }
            .s-r-b-pl {
                padding-left: 80px;
            }
        }
        .i-f-box {
            display: flex;
            color: #999;
            .txt-box {
                text-align: center;
                padding-right: 30px;
            }
        }
    }
    .l-tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        background-color: #eee;
        .t-txt {
            width: 20%;
            text-align: center;
        }
    }
    .l-box {
        // height: calc(100% - 80px) ;
        // padding-bottom: 30px;
        margin-bottom: 50px;
        .list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            // padding: 10px;
            padding: 10px 0;
            .l-n-d-a {
                position: relative;
                text-align: center;
                width: 20%;
                .arrow-xiala-font {
                    // padding-left: 10px;
                    position: absolute;
                    right: 5px;
                }
            }
            .l-n-d-a-w {
                width: 20%;
                text-align: right;
            }
        }

        .list:hover {
            color: #3388ff;
            background-color: #ededed;
        }
    }
}
</style>